@import '../../vars';

.search_box_container {
  display: flex;

  flex: 1 1 auto;
  align-items: center;
  -webkit-app-region: no-drag;
}

.search_box_container>span {
  display: flex;

  width: 30px;
  height: 30px;
  margin: 12px 0px 12px 12px;

  color: $grey;
  border-radius: 2px 0px 0px 2px;
  background-color: $blue;

  align-items: center;

}

.search_box_container span:before {
  text-align: center;

  flex: 1 1 auto;
}

.search_box_container .form {
  display: flex;

  flex: 1 1 auto;
  align-items: center;
}

.search_box_container input {
  height: 30px;
  margin: 12px 0px;
  padding: 0px 12px;

  color: $grey;
  border: none;
  border-radius: 0px 2px 2px 0px;
  outline: none;
  background-color: $background3;

  font-family: Lato;
  font-size: 16px;

  flex: 1 1 auto;
}

form,
.form {
  > span {
    position: relative;
    right: 30px;

    display: flex !important;

    width: 30px;
    height: 30px;

    align-items: center;
  }
}

::-webkit-input-placeholder {
  color: rgba(236, 240, 241, 0.5);
}
